<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
        <title>借阅</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../lib/layui/css/dtree.css">
    <link rel="stylesheet" href="../lib/layui/font/dtreefont.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../lib/axios.min.js"></script>
    <script src="../lib/FileSaver.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="layui-fluid">
      <div class="layui-row layui-col-space10">
        <div class="layui-col-md3" style="margin: 40px 0 70px 0;">
          <ul id="demoTree1" class="dtree" data-id="0"></ul>
        </div>
        <div class="layui-col-md9">
          <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>借阅清单</legend>
          </fieldset>
           
          <div id="test4" class="demo-transfer"></div>
        </div>
      </div>
    </div>
    
    <script>
      var tree = [];
      var data1 = [
        {"value": "1", "title": "李白"}
        ,{"value": "2", "title": "杜甫"}
        ,{"value": "3", "title": "苏轼"}
        ,{"value": "4", "title": "李清照"}
        ,{"value": "5", "title": "鲁迅", "disabled": true}
        ,{"value": "6", "title": "巴金"}
        ,{"value": "7", "title": "冰心"}
        ,{"value": "8", "title": "矛盾"}
        ,{"value": "9", "title": "贤心"}
      ]
      axios.get('/api/get_q').then(res=>{
        tree = res.data;
        layui.config({
            base: '../lib/layui/layui-expand/'
        }).extend({
            dtree: 'dtree'
        }).use(['table', 'dtree', 'transfer', 'layer', 'util'], function(){
          var dtree = layui.dtree
          ,table = layui.table
          ,$ = layui.$
          ,transfer = layui.transfer
          ,layer = layui.layer
          ,util = layui.util;
          console.log(tree)
          dtree.render({
            elem: "#demoTree1"  //绑定元素
            ,data: tree  //异步接口
            ,dataFormat: "list"
            ,record: true
            ,skin: "laySimple"
            ,line: true
          });
          //显示搜索框
          transfer.render({
            elem: '#test4'
            ,data: data1
            ,width: 340
            ,height: 540
            ,title: ['条目', '审批']
            ,showSearch: true
          })

        })
      })
    </script>
</body>
</html>